<template>
  <PageContainer title="查看账号">
    <!-- 具名插槽 位于页面右上角区域 -->
    <template #extra>
      <!-- 上传文件按钮 show-file-list不显示上传的文件 auto-upload不立即上传-->
      <el-upload :show-file-list="false" :auto-upload="false" :on-change="uploadFile" action="#">
        <el-button type="danger" plain>批量禁用</el-button>
      </el-upload>
    </template>

    <!-- 内容插槽 页面主元素的展示 -->

    <!-- 搜索组件 status-icon显示校验反馈图标 rules绑定校验规则 -->
    <el-form inline :model="viewUser" ref="viewUser">
      <el-form-item label="姓名:" prop="name">
        <el-input type="text" v-model="viewUser.name" placeholder="请输入姓名关键词" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学院:" prop="collegeId">
        <CollegeSelect v-model="viewUser.collegeId" />
      </el-form-item>
      <el-form-item label="身份:" prop="identify">
        <el-select v-model="viewUser.identify" style="width: 100px">
          <el-option label="教师" value="教师" /><el-option label="学生" value="学生" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-select v-model="viewUser.status" style="width: 100px">
          <el-option label="启用" value="1" /><el-option label="禁用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchForm()" type="primary">搜索</el-button>
        <el-button @click="resetForm('viewUser')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据展示 -->
    <el-table :data="userList" v-loading="loading">
      <el-table-column label="学号" prop="id" />
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="学院" prop="college" />
      <el-table-column label="班级" prop="major">
        <!-- 利用作用域插槽 row 可以获取当前行的数据 -->
        <template #default="{ row }">{{ row.major ? row.major : '无' }}</template>
      </el-table-column>
      <el-table-column label="身份" prop="identify">{{ viewUser.identify }}</el-table-column>
      <el-table-column label="状态" prop="state">
        <template #default="{ row }">{{ row.status === 1 ? '启用' : '禁用' }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button circle plain type="primary" icon="el-icon-edit" @click="editUser(row)" />
          <el-button circle plain type="danger" icon="el-icon-delete" @click="deleteUser(row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑用户组件 侧边栏 子组件编辑成功会通知父组件 调用successEdit更新页面 -->
    <EditUser ref="editUser" @successEdit="getUserList" :identify="editUserIdentify" />

    <!-- 分页组件 -->
    <!-- current-page当前页数 page-size每页显示条目个数 page-sizes每页显示个数选择器的选项设置 -->
    <el-pagination :current-page="viewUser.pageNum" :page-size="viewUser.pageSize" :page-sizes="[2, 3, 5]"
      :background="true" layout="jumper, total, sizes, prev, pager, next" :total="total" @size-change="sizeChange"
      @current-change="currentChange" style="margin-top: 20px; float:right" />
  </PageContainer>
</template>

<script>
import PageContainer from '@/components/PageContainer'
import CollegeSelect from '@/components/CollegeSelect'
import EditUser from './EditUser.vue'
import { getUserList, deleteUser, uploadUpdateExcel } from '@/api/manage'

export default {
  name: 'ViewUserPage', // 查看教师和学生页面
  components: {
    PageContainer,
    CollegeSelect,
    EditUser
  },
  async created () {
    this.getUserList() // 创建页面后获取教师和学生的数据
  },
  data () {
    return {
      loading: false, // 加载效果 取消显示加载效果true
      // 存放搜索数据的条件
      viewUser: {
        pageNum: 1, // 当前页
        pageSize: 5, // 当前生效的每页条数
        id: '',
        name: '',
        collegeId: '',
        identify: '学生',
        status: ''
      },
      total: 0, // 总条数
      userList: [] // 存放获取到的教师和学生数据
    }
  },
  methods: {
    // 获取教师和学生的数据
    async getUserList () {
      this.loading = true
      // 根据搜索数据的条件获取数据
      const { data: { data } } = await getUserList(this.viewUser)
      this.userList = data.records
      this.total = data.total
      this.loading = false
    },
    // 提交表单 发送请求
    searchForm () {
      this.viewUser.pageNum = 1 // 重置页面
      this.getUserList()
    },
    // 重置表单
    resetForm (viewUser) {
      this.$refs[viewUser].resetFields()
      // resetFields()方法会把所有数据都清空 需要额外手动赋值一些初始数据
      this.viewUser = { pageNum: 1, pageSize: 5, identify: '学生' }
      this.getUserList()
    },
    // 处理被编辑用户的身份
    editUserIdentify () {
      // 直接往EditUser组件传userList[0].identify会出现渲染报错 因为userList[0].identify是三层表达式
      if (this.userList[0].identify !== undefined) return this.userList[0].identify
      return ''
    },
    // 编辑教师和学生信息
    editUser (row) {
      // 调用EditUser组件的openDrawer()方法显示drawer 并把每行的数据row传入进去
      this.$refs.editUser.openDrawer(row)
    },
    // 删除教师和学生信息
    deleteUser (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteUser(row.id, this.viewUser.identify)
        this.$message.success('删除成功')
        this.getUserList() // 删除成功后重新更新页面
      }).catch(() => { }) // 取消后不行任何逻辑操作 但必须写catch
    },
    // 分页数变化
    sizeChange (size) {
      this.viewUser.pageNum = 1
      this.viewUser.pageSize = size
      this.getUserList()
    },
    // 页数变化
    currentChange (page) {
      this.viewUser.pageNum = page
      this.getUserList()
    },
    // 上传文件
    async uploadFile (uploadFile) {
      // 上传文件前需要对文件进行校验
      const extension = uploadFile.raw.name.substring(uploadFile.raw.name.lastIndexOf('.') + 1)
      const size = uploadFile.raw.size / 1024 / 1024
      if (extension !== 'xls' && extension !== 'xlsx') {
        this.$message.error('只能上传后缀是.xls或.xlsx的文件')
        return
      }
      if (size > 10) {
        this.$message.error('文件大小不得超过10M')
        return
      }

      // uploadUpdateExcel()必须要传入一个FormData对象
      const formData = new FormData()
      formData.append('excelFile', uploadFile.raw)
      await uploadUpdateExcel(formData)
      this.$message.success('批量禁用成功')
      this.getUserList()
    }
  }
}
</script>
